<style type="text/css">
	#tpl-file-info-id{
		padding: 20px
	}

	#tpl-file-info-id .icon{height: 38px;line-height: 38px;text-align: center;}
	#tpl-file-info-id .icon i{font-size: 2rem;font-weight: 800;color: blue;margin-left: 1rem;margin-right: 1rem;cursor: pointer;color: #717171}
	.tpl-file-info-id-collect{
		color: #ffb800 !important;
	}
</style>
<script type="text/html" id="tpl-file_info">
	<form class="layui-form layui-form-pane" action="" id='tpl-file-info-id'>
		<div class="layui-form-item">
			<label class="layui-form-label">名称</label>
			<div class="layui-input-block">
				<input type="text" readonly="" class="layui-input" value="{{d.file_name}}">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">目录</label>
			<div class="layui-input-block">
				<input type="text" readonly="" class="layui-input" value="{{d.path}}">
			</div>
		</div>

		{{# if(d.type==1){ }}
			<div class="layui-form-item">
				<label class="layui-form-label">尺寸</label>
				<div class="layui-input-block">
					<input type="text" readonly="" class="layui-input" value="{{d.size}}">
				</div>
			</div>
		{{# } }}

		<div class="layui-form-item">
			<label class="layui-form-label">类型</label>
			<div class="layui-input-block">
				<input type="text" readonly="" class="layui-input" value="{{d.suffix}}">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">时间</label>
			<div class="layui-input-block">
				<input type="text" readonly="" class="layui-input" value="{{d.update_time}}">
			</div>
		</div>

		<div class="icon">
			{{# if(d.extend.open==1){ }}
			<i data-type='1' class="layui-icon layui-icon-triangle-r" title="打开/运行/预览/查看"></i>
			{{# } }}
			{{# if(d.collect==1){ }}
			<i data-type='2' data-collect_status=1 class="layui-icon layui-icon-star-fill tpl-file-info-id-collect" title="取消收藏"></i>
			{{# }else{ }}
			<i data-type='2' data-collect_status=0 class="layui-icon layui-icon-star" title="收藏"></i>
			{{# } }}
			{{# if(d.type==1){ }}
			<i data-type='3' class="layui-icon layui-icon-download-circle" title="下载"></i>
			{{# } }}
			{{# if(d.count!=0){ }}
			<i data-type='5' class="layui-icon layui-icon-log" title="历史版本"></i>
			{{# } }}
			
			<i data-type='4' class="layui-icon layui-icon-share" title="分享"></i>
			

		</div>
	</form>
</script>
<script type="text/javascript">
	app.defTpl('file_info',function(arg){
		layui.use(['layer','laytpl'],function(){
			var laytpl = layui.laytpl,$=layui.$;
			app.ajaxPost('/api/file/getInfoByFileId',{fileId:arg.file_id,collect:1},function(data){
				var d=data.data;
				d.extend={}
				if(d.type==2){
					d.suffix='文件夹'
				}else{
					d.suffix = app.getExtendName(d.file_name)
				}
				
				// console.log('是否为可打开文件',app.base.isOpenFile(d.file_name))
				if(app.base.isOpenFile(d.file_name) || d.type==0){
					d.extend.open=1
				}
				if (d.size == 0) {
					d.size = '0B';
				} else if (d.size) {
					d.size = app.bytesToSize(d.size);
				} else {
					d.size = '-';
				}
				laytpl($('#tpl-file_info').html()).render(d, function(html){
				  	app.layer({
			            type: 1,
			            title:'文件详情',
			            anim: 2,
			            area: ['400px'],
			            shade: 0.5,
						shadeClose:true,
			            content: html,
			            success:function(o,index){
			            	// 监听图标点击
							$('#tpl-file-info-id .icon i').click(function(){
								console.log('图标被点击');
								if($(this).data('type')==1){
									// 打开
									layer.close(index)
									if(d.type==1){
										console.log(d)
										app.base.openFile({
											name: d.file_name,
											id: d.id,
											type: (d.type == '/DIR' ? 0 : 1),
											src: d.source_path,
											path: d.path,
											before: function (o) {
												// // console.log(o)
												// if(o.isOpen==false){
												// 	app.runTpl('file_info',{file_id:d.id})
												// 	return false;
												// }
											}
										})
									}else{
										layer.alert("点击的文件夹")
										// app.go('/index/file_list?path='+d.path+d.id+'/')
									}
									
								}else if($(this).data('type')==2){
									// 收藏/取消
									console.log($(this).data('collect_status'))
									if($(this).data('collect_status')==1){
										// 取消
										delCollect($(this))
									}else{
										// 收藏
										addCollect($(this))

									}
									
								}else if($(this).data('type')==3){
									// 下载
									window.open('/source/download?file_id='+d.id)
								}else if($(this).data('type')==4){
									// 分享
									layer.confirm('确定分享？', {
										btn: ['生成链接', '取消'] //按钮
									}, function (index) {
										app.runTpl('file_share', { file_id: d.id });
										layer.close(index)
									})
									
								} else if ($(this).data('type') == 5) {
									// 历史版本
									app.runTpl('file_history',{file_id: d.id});
								}
							})
			            }
			        });
				});
			})

			function addCollect(o){
				console.log('添加收藏')
				app.ajaxPost('/api/collect/add',{fileId:arg.file_id},function(){
					o.removeClass('layui-icon-star');
					o.addClass('layui-icon-star-fill');
					o.addClass('tpl-file-info-id-collect');

					o.data('collect_status',1)
					o.attr('title','取消收藏')
				});
			}

			function delCollect(o){
				console.log('删除收藏')
				app.ajaxPost('/api/collect/delete',{fileId:arg.file_id},function(){
					o.removeClass('layui-icon-star-fill');
					o.removeClass('tpl-file-info-id-collect');
					o.addClass('layui-icon-star');
					o.data('collect_status',0)
					o.attr('title','收藏')
				});
			}











		})
	})
	
</script>